<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>css控件组</title>
		<style type="text/css">
			/***************************************
 *
 * Reset
 *
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 13px/1 sans-serif;
  color: #333;
  background-color: #eee;
}


/***************************************
 *
 * Grid
 *
 */

.large-12 {
  padding: 15px;
}


/***************************************
 *
 * Layout
 *
 */

.header {
  height: 100px;
  padding-top: 30px;
  text-align: center;
}

.logo {
  font-family: 'Avenir Next', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.wrapper {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

.inner {
  width: 500px;
  margin: auto;
  padding: 15px 0;
}


/***************************************
 *
 * Tabs
 *
 */

.c-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.c-tabs [id*='-tab-content-'] {
  display: none;
}

.c-tabs input[type='checkbox'],
.c-tabs input[type='radio'] {
  display: none;
}

.c-tabs label {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  color: #59d;
  border: 1px solid #59d;
  border-left-width: 0;
}

.c-tabs label:nth-child(2) {
  border-left-width: 1px;
}

.c-tabs input:checked + label {
  color: #fff;
  background: #59d;
}


/***************************************
 *
 * Helper Classes
 *
 */

.c-tabs-content label {
  border: 0;
}

.c-tabs-minimal label {
  flex: none;
  padding: 10px;
}


/***************************************
 *
 * Content
 *
 */

.c-content {
  display: none;
  width: 100%;
  padding: 15px;
  background: #eee;
}

#c-tab-11:checked ~ #c-content-11,
#c-tab-12:checked ~ #c-content-12,
#c-tab-13:checked ~ #c-content-13,
#c-tab-14:checked ~ #c-content-14,
#c-tab-15:checked ~ #c-content-15,
#c-tab-16:checked ~ #c-content-16,
#c-tab-17:checked ~ #c-content-17,
#c-tab-18:checked ~ #c-content-18,
#c-tab-19:checked ~ #c-content-19,
#c-tab-20:checked ~ #c-content-20 {
  display: block;
}
		</style>
	</head>
	<body>
		
		<div class="header">
  <div class="inner">
    <div class="logo">CSS Tabs with Flexbox</div>
  </div>
</div>

<div class="wrapper">
  <div class="inner">

    <div class="grid">
      <div class="large-12">

        Pure CSS tabs without content (Checkboxes)

      </div>
      <div class="large-12">

        <div class="c-tabs">
          <input id="c-tab-1" name="c-tabs-1" type="checkbox" checked>
          <label for="c-tab-1">Check 1</label>
          <input id="c-tab-2" name="c-tabs-1" type="checkbox">
          <label for="c-tab-2">Check 2</label>
          <input id="c-tab-3" name="c-tabs-1" type="checkbox" checked>
          <label for="c-tab-3">Check 3</label>
          <input id="c-tab-4" name="c-tabs-1" type="checkbox">
          <label for="c-tab-4">Check 4</label>
          <input id="c-tab-5" name="c-tabs-1" type="checkbox">
          <label for="c-tab-5">Check 5</label>
        </div>

      </div>
      <div class="large-12">

        Pure CSS tabs without content (Radios)

      </div>
      <div class="large-12">

        <div class="c-tabs">
          <input id="c-tab-6" name="c-tabs-2" type="radio" checked>
          <label for="c-tab-6">Radio 1</label>
          <input id="c-tab-7" name="c-tabs-2" type="radio">
          <label for="c-tab-7">Radio 2</label>
          <input id="c-tab-8" name="c-tabs-2" type="radio">
          <label for="c-tab-8">Radio 3</label>
          <input id="c-tab-9" name="c-tabs-2" type="radio">
          <label for="c-tab-9">Radio 4</label>
          <input id="c-tab-10" name="c-tabs-2" type="radio">
          <label for="c-tab-10">Radio 5</label>
        </div>

      </div>
      <div class="large-12">

        Pure CSS tabs with content (full width)

      </div>
      <div class="large-12">

        <div class="c-tabs c-tabs-content">
          <input id="c-tab-11" name="c-tabs-3" type="radio" checked>
          <label for="c-tab-11">Radio 1</label>
          <input id="c-tab-12" name="c-tabs-3" type="radio">
          <label for="c-tab-12">Radio 2</label>
          <input id="c-tab-13" name="c-tabs-3" type="radio">
          <label for="c-tab-13">Radio 3</label>
          <input id="c-tab-14" name="c-tabs-3" type="radio">
          <label for="c-tab-14">Radio 4</label>
          <input id="c-tab-15" name="c-tabs-3" type="radio">
          <label for="c-tab-15">Radio 5</label>

          <div id="c-content-11" class="c-content">
            Radio 1
          </div>
          <div id="c-content-12" class="c-content">
            Radio 2
          </div>
          <div id="c-content-13" class="c-content">
            Radio 3
          </div>
          <div id="c-content-14" class="c-content">
            Radio 4
          </div>
          <div id="c-content-15" class="c-content">
            Radio 5
          </div>
        </div>

      </div>
      <div class="large-12">

        Pure CSS tabs with content (no full width)

      </div>
      <div class="large-12">

        <div class="c-tabs c-tabs-content c-tabs-minimal">
          <input id="c-tab-16" name="c-tabs-4" type="radio" checked>
          <label for="c-tab-16">Radio 1</label>
          <input id="c-tab-17" name="c-tabs-4" type="radio">
          <label for="c-tab-17">Radio 2</label>
          <input id="c-tab-18" name="c-tabs-4" type="radio">
          <label for="c-tab-18">Radio 3</label>
          <input id="c-tab-19" name="c-tabs-4" type="radio">
          <label for="c-tab-19">Radio 4</label>
          <input id="c-tab-20" name="c-tabs-4" type="radio">
          <label for="c-tab-20">Radio 5</label>

          <div id="c-content-16" class="c-content">
            Radio 1
          </div>
          <div id="c-content-17" class="c-content">
            Radio 2
          </div>
          <div id="c-content-18" class="c-content">
            Radio 3
          </div>
          <div id="c-content-19" class="c-content">
            Radio 4
          </div>
          <div id="c-content-20" class="c-content">
            Radio 5
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
	</body>
</html>
